<template>
  <el-drawer direction="rtl" v-model="dialogVisible" :title="dialogTitle" size="90%">
      <!-- 搜索 -->
      <ContentWrap>
        <el-form
          class="-mb-15px"
          :model="queryParams"
          ref="queryFormRef"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="" prop="keyWord">
            <el-input placeholder="请输入内容" v-model.trim="keyWord">
              <template #prepend>
                <el-select v-model="kType" placeholder="请选择" class="!w-120px">
                  <el-option label="电表名称" value="meterName" />
                  <el-option label="电表编码" value="meterNo" />
                </el-select>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="elecOpenFlag">
            <el-select
              v-model="queryParams.elecOpenFlag"
              placeholder="通电状态"
              clearable
              class="!w-120px"
            >
              <el-option
                v-for="dict in meterElectOpenStateDictDatas"
                :key="parseInt(dict.value)"
                :label="dict.label"
                :value="parseInt(dict.value)"
              />
            </el-select>
            <el-select
              v-model="queryParams.protectFlag"
              placeholder="保电状态"
              clearable
              class="!w-120px"
            >
              <el-option
                v-for="dict in protects"
                :key="parseInt(dict.value)"
                :label="dict.label"
                :value="parseInt(dict.value)"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
          </el-form-item>
        </el-form>
      </ContentWrap>
      <ContentWrap>
        <el-table v-loading="loading" :data="list">
          <el-table-column
            label="社区/电表名称/编码/安装位置"
            align="left"
            prop="meterName"
            min-width="420"
          >
            <template #default="scope">
              <div> 社区：{{ scope.row.community.name }} </div>
              <div>
                名称：<el-link type="primary" @click="showMeter(scope.row.id)">{{
                  scope.row.meterName
                }}</el-link>
              </div>
              <div>
                编码：<label>{{ scope.row.meterNo }}</label>
              </div>
              <div>
                位置：<el-button
                  type="primary"
                  link
                  :icon="Edit"
                  @click="handleInstall(scope.row)"
                  v-hasPermi="['zwsj:meter:update']"
                >
                  {{ scope.row.bindAddresses }}</el-button
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column label="参数" align="left" prop="voltage" width="130">
            <template #default="scope">
              <div> 保电：{{ scope.row.protectFlag == 1 ? '是' : '否' }}</div>
              <div> 功率：{{ scope.row.power }}</div>
              <div> 电流：{{ scope.row.elecCurrent }}</div>
              <div> 总kWh：{{ scope.row.totalKwh }}</div>
            </template>
          </el-table-column>
          <el-table-column label="其他参数" align="left" width="130">
            <template #default="scope">
              <div> 尖kWh：{{ scope.row.sharpKwh }}</div>
              <div> 峰kWh：{{ scope.row.peakKwh }}</div>
              <div> 平kWh：{{ scope.row.flatKwh }}</div>
              <div> 谷kWh：{{ scope.row.valleyKwh }}</div>
            </template>
          </el-table-column>
          <el-table-column label="余额" align="center" prop="lastBalance" width="120" />
          <el-table-column label="通电状态" align="center" prop="elecOpenFlag" width="80">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.METER_ELECT_OPEN_STATE" :value="scope.row.elecOpenFlag" />
            </template>
          </el-table-column>
          <el-table-column
            label="最后连接时间"
            align="center"
            prop="lastConnecttime"
            width="160"
            :formatter="dateFormatter('YYYY-mm-dd HH:MM:SS')"
          />
          <el-table-column label="银联账户" align="center" fixed="right" width="90">
            <template #default="scope">
              <el-button
                type="primary"
                link
                @click="showOwnMeterConfig(scope.row.ownMeterConfigRespVO.id)"
                v-if="scope.row.ownMeterConfigRespVO != null"
              >
                {{ scope.row.ownMeterConfigRespVO.memberUserName }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          :total="total"
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </ContentWrap>
  </el-drawer>
</template>
<script lang="ts" setup>
import { dateFormatter } from '@/utils/formatTime'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as MeterApi from '@/api/zwsj/meter'

defineOptions({ name: 'OwnMeterConfigMeters' })

const meterElectOpenStateDictDatas = getIntDictOptions(DICT_TYPE.METER_ELECT_OPEN_STATE)
const protects = ref([
  {
    value: 1,
    label: '保电中'
  },
  {
    value: 0,
    label: '不保电'
  }
])

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数

const keyWord = ref('')
const kType = ref('meterName')
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  commId: null,
  matCodeId: null,
  meterName: '',
  meterNo: ''
})
/** 打开弹窗 */
const matCodeIdRef = ref<number>() // 搜索的表单
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const open = async (matCodeId: number) => {
  loading.value = false
  dialogTitle.value = '银联账户关联的电表'
  matCodeIdRef.value = matCodeId
  queryParams.matCodeId = matCodeId
  dialogVisible.value = true
  getList()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 查询列表 */
const getList = async () => {
      queryParams.meterName = ''
      queryParams.meterNo = ''
    if (kType.value == 'meterName') {
      queryParams.meterName = keyWord.value
    } else if (kType.value == 'meterNo') {
      queryParams.meterNo = keyWord.value
    }
    const data = await MeterApi.getMeterPage(queryParams)
    list.value = data.list
    total.value = data.total
    loading.value = false
}


/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}
</script>
